<template>
  <view class="express-pickup-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <view class="header-title">快递代取</view>
      <view class="header-actions">
        <text class="action-icon">⋯</text>
        <text class="action-icon">−</text>
        <text class="action-icon">◎</text>
      </view>
    </view>

    <!-- 配送信息 -->
    <view class="section">
      <view class="section-title">配送信息</view>
      
      <!-- 送到哪里去 -->
      <view class="info-row" @click="selectDeliveryAddress">
        <view class="info-left">
          <view class="info-icon delivery-icon">🚚</view>
          <text class="info-label">送到哪里去(必填)</text>
        </view>
        <view class="info-right">
          <text class="info-value" :class="{ 'placeholder': !deliveryAddress }">
            {{ deliveryAddress || '暂无' }}
          </text>
          <text class="location-icon">📍</text>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 期望送达 -->
      <view class="info-row" @click="selectDeliveryTime">
        <view class="info-left">
          <text class="info-label">期望送达</text>
        </view>
        <view class="info-right">
          <text class="info-value delivery-time">{{ deliveryTime }}</text>
          <text class="arrow-icon">›</text>
        </view>
      </view>
    </view>

    <!-- 物品信息 -->
    <view class="section">
      <view class="section-title">物品信息</view>
      
      <!-- 物品规格 -->
      <view class="info-row" @click="selectItemSize">
        <view class="info-left">
          <text class="info-label">[1] 物品规格</text>
        </view>
        <view class="info-right">
          <text class="info-value">{{ itemSize }}</text>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 取件码 -->
      <view class="info-row">
        <view class="info-left">
          <text class="info-label">取件码*</text>
        </view>
        <view class="info-right">
          <input 
            class="pickup-code-input" 
            v-model="pickupCode" 
            placeholder="请输入取件码"
            maxlength="20"
          />
        </view>
      </view>

      <!-- 在哪里取件 -->
      <view class="info-row" @click="selectPickupLocation">
        <view class="info-left">
          <text class="info-label">在哪里取件</text>
        </view>
        <view class="info-right">
          <text class="info-value pickup-location">{{ pickupLocation }}</text>
          <text class="arrow-icon">›</text>
        </view>
      </view>

      <!-- 费用小计 -->
      <view class="info-row">
        <view class="info-left">
          <text class="info-label">费用小计</text>
        </view>
        <view class="info-right">
          <text class="fee-amount">¥{{ totalFee.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <button class="add-item-btn" @click="addItem">
        <text class="add-icon">+</text>
        <text class="add-text">增加取件</text>
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getSizePrice } from '@/config/pricing'

// 响应式数据
const deliveryAddress = ref('')
const deliveryTime = ref('今日,立即送出')
const itemSize = ref('小(美瞳/手机壳)左右')
const pickupCode = ref('')
const pickupLocation = ref('西院篮球场(第三食堂)')

// 计算属性
const baseFee = computed(() => {
  return getSizePrice('EXPRESS_PICKUP', itemSize.value)
})

const totalFee = computed(() => {
  return baseFee.value
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const selectDeliveryAddress = () => {
  uni.navigateTo({
    url: '/pages/address-select/address-select',
    events: {
      addressSelected: (address: string) => {
        deliveryAddress.value = address
      }
    }
  })
}

const selectDeliveryTime = () => {
  const timeOptions = ['今日,立即送出', '今日,下午送达', '明日送达']
  uni.showActionSheet({
    itemList: timeOptions,
    success: (res) => {
      deliveryTime.value = timeOptions[res.tapIndex]
    }
  })
}

const selectItemSize = () => {
  const sizeOptions = ['小(美瞳/手机壳)左右', '中(书本/衣服)左右', '大(行李箱/大件)左右']
  uni.showActionSheet({
    itemList: sizeOptions,
    success: (res) => {
      itemSize.value = sizeOptions[res.tapIndex]
      // 价格会自动更新，因为baseFee是计算属性
    }
  })
}

const selectPickupLocation = () => {
  const locationOptions = ['西院篮球场(第三食堂)', '东院菜鸟驿站', '北门快递柜', '南门快递点']
  uni.showActionSheet({
    itemList: locationOptions,
    success: (res) => {
      pickupLocation.value = locationOptions[res.tapIndex]
    }
  })
}

const addItem = () => {
  // 验证必填项
  if (!deliveryAddress) {
    uni.showToast({
      title: '请选择配送地址',
      icon: 'none'
    })
    return
  }
  
  if (!pickupCode) {
    uni.showToast({
      title: '请输入取件码',
      icon: 'none'
    })
    return
  }
  
  // 准备传递的数据
  const expressData = {
    deliveryAddress: deliveryAddress.value,
    deliveryTime: deliveryTime.value,
    itemSize: itemSize.value,
    pickupCode: pickupCode.value,
    pickupLocation: pickupLocation.value,
    baseFee: baseFee.value
  }
  
  // 跳转到订单确认页面，并传递数据
  uni.navigateTo({
    url: '/pages/order-confirm/order-confirm',
    success: (res) => {
      // 通过事件通道传递数据
      res.eventChannel.emit('expressData', expressData)
    }
  })
}
</script>

<style scoped>
.express-pickup-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.action-icon {
  font-size: 32rpx;
  color: #666;
}

/* 内容区域 */
.section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.info-icon {
  font-size: 32rpx;
}

.delivery-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #4caf50;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24rpx;
}

.info-label {
  font-size: 30rpx;
  color: #333;
}

.info-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
}

.info-value.placeholder {
  color: #999;
}

.delivery-time {
  color: #ff9800;
}

.pickup-location {
  color: #ff9800;
}

.location-icon {
  font-size: 24rpx;
  color: #f44336;
}

.arrow-icon {
  font-size: 24rpx;
  color: #ccc;
}

/* 输入框 */
.pickup-code-input {
  width: 300rpx;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  text-align: right;
}

/* 费用显示 */
.fee-amount {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

/* 底部按钮 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}

.add-item-btn {
  width: 100%;
  height: 88rpx;
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
}

.add-icon {
  font-size: 36rpx;
  font-weight: bold;
}

.add-text {
  font-size: 32rpx;
}
</style>
